<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        * {
            padding: 0;
            margin: 0;
        }

        /* 格式就这样写，严格按照这种写法 */
        /* run 是自定义的名称 */
        /* 关键帧们，里面的每一项称做一个关键帧 */
        /* 0% 和 100% 要有 */
        /* 关键帧的数量自己来定，多少个都可以 */
        /* 0% - 100% 一共耗时是设置的duration，根据百分比线性分配每一段的时间*/
        /* 所以设置总时间为4s，则0%-25%占1s */
        /* 关键帧是时刻，时刻是不占时间的 */
        @keyframes run {
            /* 0% 和 from 完全等价 */
            from{
                left: 0;
                top: 0;
                background-color: #f20;
            }
            25%{
                left: 100px;
                top: 0;
                background-color: #ff0;
            }
            50%{
                left: 100px;
                top: 100px;
                background-color: #0f0;
            }
            75%{
                left: 0;
                top: 100px;
                background-color: #09f;
            }
            /* 100% 和 to 完全等价 ，其它的百分数没有替代词*/
            100%{
                left: 0;
                top: 0;
                background-color: #f0f;
            }
        }

        @keyframes change {
            0% {
                opacity: 1;
            }
            50%{
                opacity: 0.3;
            }
            to{
                opacity: 1;
            }
        }


        /* 可以定义多个keyframes，和元素没关系，多个元素可以使用一个动画，互不影响 */
        /* 一个元素还可以使用多个动画，逗号隔开 */
        /* @-webkit-keyframes */
        @keyframes run1 {
            0%{
                left: 0;
                top: 0;
            }
            100%{
                left: 200px;
                top: 200px;
            }
        }
        /* 书写的时候，第一帧和最后一帧以及初始状态的属性的数量要一样，避免出现问题 */
        /* 就是说，各个变化的属性都要手动设置好，其实初始状态不设也没啥问题，但是第一帧和最后一帧的属性必须得全 */
        div {
            width: 100px;
            height: 100px;
            background-color: black;
            position: absolute;
            left: 0;
            top: 0;


            animation: run 4s ease 2s 2 reverse;
            /* 速写属性：名字、持续时间、运动状态、延迟时间、次数，方向*/


            /* animation: run 4s, change 4s; */
            /* 逗号隔开，每个属性单独写，也要逗号隔开，每个属性设置两个值 */
            /* 并行运动，两个动画不要有冲突 */

            animation-name: run;
            /* 动画的名字
            默认值： none
            */


            animation-duration: 4s;
            /* 持续时间，和transition-duration一样
            默认值：0s
             */
            
            animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
            /* 每一段的运动状态
            默认值：ease
            其它值和transition的一样
             */

            animation-delay: 1s;
            /* 执行动画的延迟时间，如果初始状态和第一帧不一样，则会延迟2s直接跳过去
                默认值：0s 
             */

            animation-iteration-count: 1;
            /* 动画循环执行的次数，后面的次数不会再延迟2s
                默认值：1
                infinite: 无限循环
             */

            animation-direction: alternate;
            /* 动画执行的方向
               默认值：normal，正常方向
                reverse：反方向，从100% --> 0%
                alternate: 正着一次，反着一次，交替，所以执行次数需要大于2才有效果
                alternate-reverse：反着一次，正着一次
             */

            animation-fill-mode: none;
            /* 
                默认值：none，就正常情况
                forwards：动画结束后保留结束的状态，100%的状态
                backwards：一开始就保持0%时的状态，不设置延迟时间会看不出来
                both: 两者都有，开始保持第一帧，结束保持最后一帧
            
             */

        }

        div:hover {
            animation-play-state: paused;
            /* 
              设置暂停和运行，兼容性不是很好，有的版本鼠标移走后不是继续运动，而是从头开始
              默认值：running
              paused: 暂停，一般配合hover等使用
             */
        }



    </style>
</head>
<body>
    <div></div>
</body>
</html>